<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: 976901273@qq.com
 * @Date: 2022-07-20 09:34:27
 * @LastEditors: 976901273@qq.com
 * @LastEditTime: 2023-07-27 14:21:51
 * @Description:
 *
-->
<template>
  <div
    class="top5-cluster-ctn"
  >
    <!-- 注释
          标注ID
             用来重复性echarts画图
                                左侧雷达图-->
    <div :id="appStatusRatio.id" class="map"></div>
    <!-- 注释
          右侧部分
             1.集群信息
             2. 4个信息环形图
                            -->
    <div class="cluster">
      <!-- 右侧上部分集群信息 -->
      <div class="clusterName">
        <el-row>
          <!-- 集群图标 -->
          <el-col :span="6">
            <img alt="" style="width:40px;position:relative;top:10px;margin-right:10px;margin-left:10px" src="../../../assets/imgs/situation/clusterSmall.png" />
          </el-col>
          <!-- 集群名称 -->
          <el-col :span="9">
            <div :title="appStatusRatio.cluster" style="color:#03D3FF;font-size:14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top:20px;text-align: right;">{{ appStatusRatio.cluster }} &nbsp;</div>
          </el-col>
          <!-- 集群供应商 -->
          <el-col :span="9">
            <div style="color:#7B9CB8;font-size:12px;margin-top:20px">/&nbsp;{{ appStatusRatio.clusterProvider }}</div>
          </el-col>
        </el-row>
      </div>
      <!-- 右侧下部分4个环形图 -->
      <div class="clusterInfo">
        <div style="height:10px"></div>
        <!-- 注释
          4个环形图
             1.通过id区分
             2. v-for循环生成
                            -->
        <el-col
          v-for="(item, index) in appStatusRatio.data"
          :key="index"
          :span="12"
        >
          <div :id="item.id" style="width:60px;height:60px;float:left;margin-right:5px"></div>
          <div style="float-right;margin-top:6px">
            <!-- 参数值 -->
            <span style="color:#DBF1FF;font-size:16px">{{ item.value }}</span><br />
            <!-- 名称 -->
            <span style="color:#7B9CB8;font-size:12px">{{ item.name }}</span>
          </div>
        </el-col>

      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import echarts from "echarts";
// 颜色数组
const BORDER_COLORS = ['#00EAFF ', '#00BFFF', '#00FCD3', '#00F9FF ', '#00FFE1', '#00FF9C', '#61EF48', '#FFF22D']

export default {
  name: 'AppStatusRatio',
  components: {},
  props: {
    appStatusRatio: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      charts: [],
      radarMap: null
    }
  },
  computed: {},
  watch: {
    'appStatusRatio': {
      handler: function(newValue, oldValue) {
        this.$nextTick(() => {
          this.initChart()
        })
      },
      deep: true
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    // 清除echarts组件
    // 节省性能
    for (let i = 0, len = this.charts.length; i < len; i++) {
      if (!this.charts[i]) {
        continue
      }
      this.chart[i].dispose()
      this.chart[i] = null
    }
    // 清除所有加载的组件
    this.charts = []
    this.radarMap = []
  },
  methods: {
    /**
     * @description: echarts组件
     * @description: 绘制雷达图
     * @return {*}
     */
    drawRadar(id) {
      // 注释
      // 避免重复加载
      // 节省性能
      if (this.radarMap == null) {
        this.radarMap = echarts.init(document.getElementById(id))
      }
      const option = {
        backgroundColor: 'transparent', // 背景透明
        'color': ['rgba(245, 166, 35, 1)', 'rgba(19, 173, 255, 1)'], // 渐变色
        'legend': { // 主体位置
          'show': true,
          'icon': 'circle',
          'left': '35%',
          'top': '90%',
          'orient': 'horizontal',
          'textStyle': {
            'fontSize': 14, // 字体大小
            'color': '#B0CFE8'// 字体颜色
          }
        },
        'radar': {
          'center': ['50%', '50%'], // 雷达图圈的大小
          'radius': '70%',
          'startAngle': 90,
          'splitNumber': 4,
          'shape': 'circle',
          'splitArea': {
            'areaStyle': {
              'color': ['transparent']// 透明色
            }
          },
          'axisLabel': {
            'show': false,
            'fontSize': 18,
            'color': '#fff', // 字体颜色
            'fontStyle': 'normal',
            'fontWeight': 'normal'// 字体粗细
          },
          'axisLine': {
            'show': true,
            'lineStyle': {
              'color': '#B0CFE8'// 字体颜色
            }
          },
          'splitLine': {
            'show': true,
            'lineStyle': {
              'color': '#B0CFE8'// 颜色
            }
          },
          'indicator': [{
            'name': 'CPU', // 雷达图坐标
            'max': 100// 最大值
          }, {
            'name': '磁盘', // 雷达图坐标
            'max': 100// 最大值
          }, {
            'name': '容器组', // 雷达图坐标
            'max': 100// 最大值
          }, {
            'name': '内存', // 雷达图坐标
            'max': 100// 最大值
          }]
        },
        'series': [{
          'name': '使用率', // 名称
          'type': 'radar',
          'symbol': 'circle',
          'symbolSize': 2, // 圆点大小
          'areaStyle': {
            'normal': {
              'color': 'rgba(3,211,255, 0.5)'
            }
          },
          itemStyle: {
            color: 'rgba(3,211,255, 1)', // 文字颜色
            borderColor: 'rgba(3,211,255, 1)', // 背景颜色
            borderWidth: 1
          },
          'lineStyle': {
            'normal': {
              'type': 'line', // 线段类型
              'color': 'rgba(3,211,255, 1)', // 文字颜色
              'width': 2
            }
          },
          // 加载4个环形图数据
          // 顺序不可错位
          'data': [
            [this.appStatusRatio.data[0].value*100, this.appStatusRatio.data[3].value*100, this.appStatusRatio.data[1].value*100, this.appStatusRatio.data[2].value*100]
          ]
        }]
      }
      // 注解
      // 设置echarts属性并加载
      this.radarMap.setOption(option, true)
    },

    /**
     * @description: 绘制环形图
     * @description: 一共有4个
     * @return {*}
     */
    setChartOption() {
      for (let i = 0, len = this.charts.length; i < len; i++) {
        this.charts[i].setOption({
          backgroundColor: 'transparent',
          color: ['#eb644b', '#313443', '#fff'],
          legend: {
            show: false,
            itemGap: 12,
            data: ['01', '02']
          },
          series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: false,
            radius: [18, 23],
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: BORDER_COLORS[2 * i] // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: BORDER_COLORS[2 * i + 1] // 100% 处的颜色
                  }]
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            center: ['50%', '50%'],
            hoverAnimation: false,
            data: [{
              value: 100 - this.appStatusRatio.data[i].value*100, // 阴影的数据
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: 'rgba(97,154,191,0.3)', // 未完成的圆环的颜色
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                },
                emphasis: {
                  color: 'rgba(97,154,191,0.3)'// 未完成的圆环的颜色
                }
              }
            },
            {
              value: this.appStatusRatio.data[i].value*100, // 实际的数据
              name: '01'
            }
            ]
          }
          ]
        })
      }
    },

    /**
     * @description: 获取父组件数据
     * @description: 数据初始化
     * @return {*}
     */
    initChart() {
      // 注释
      // 避免重复加载
      // 节省性能
      console.log(this.appStatusRatio.data)
      if (this.charts.length !== this.appStatusRatio.data.length) {
        const charts = []
        for (const item of this.appStatusRatio.data) {
          const chart = echarts.init(document.getElementById(item.id))
          charts.push(chart)
        }
        this.charts = charts
      }
      this.setChartOption()
      this.drawRadar(this.appStatusRatio.id)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../assets/css/common.less';

.top5-cluster-ctn {
  //左侧样式
  .cluster{
    width:245px;
    height:180px;
    float:right;
    position:relative;
    //集群名称样式
    .clusterName{
      width:90%;
      background: url('../../../assets/imgs/situation/clusterFrame1.png') no-repeat center;
      background-size: 100% 100%;
      padding-bottom:15px
    }
    //集群供应商样式
    .clusterInfo{
      width:90%;
      height:140px;
      background: url('../../../assets/imgs/situation/clusterFrame1.png') no-repeat center;
      background-size: 100% 100%;
      padding-bottom:15px
    }
  }
  //右侧雷达图样式
  .map{
    width:210px;
    height:180px;
    position:relative;
    top:10px;
    float:left
  }
}
</style>
